<!DOCTYPE html>
<html lang="en">
  <head>
  	<meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/js/elementUI/index.css"/>
	<link rel="stylesheet" type="text/css" href="../../static/js/elementUI/indexfont.css"/>
	<link rel="stylesheet" type="text/css" href="../../static/js/elementUI/docs.bbc11ec.css"/>
   <style>
     #icon-list{
       display:none;
     }
   </style>
   </head>
  
  <body>
		 
    	<div id="roleList" style="margin: 0;width: 100%;overflow: hidden;">
    		 
    		 <el-input
		  placeholder="输入关键字进行过滤"
		  v-model="filterText">
		</el-input>
    	<el-tree  
            :data="data"  
            :props="defaultProps"  
            node-key="id"  
            :default-expand-all="expandAllNodes"  
            :expand-on-click-node="true"
            check-strictly  
            @node-click="nodeClick"
            :filter-node-method="filterNode"
            ref="bmsrolemanage"
            show-checkbox
            :render-content="renderContent">  
    </el-tree>  
    <!-- 角色的添加、编辑对话框窗口 -->
    <el-dialog :title="bmsRoleTitle" :visible.sync="bmsRoleVisible">
    <el-form :model="role" :rules="roleRule" ref="roleForm">
        
    <el-form-item label="父级角色" :label-width="formLabelWidth">
 		   <el-cascader 
			 placeholder="对角色进行搜索"
		    :options="data"
		    :props="defaultProps"
		    filterable
		    :disabled="status==0"
		    v-model="optionDefalut"
		    :show-all-levels="false"
		    change-on-select
		    @change="getSelectNode"
			  >
          </el-cascader>
    </el-form-item>
    <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
      <el-input v-model="role.roleName" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" :label-width="formLabelWidth">
      <el-input v-model="role.descript" auto-complete="off"></el-input>
    </el-form-item>
     
     
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="resetRole()" v-cloak>取 消</el-button>
    <el-button type="primary" @click="saveRole()" v-cloak>确 定</el-button>
  </div>
</el-dialog>

<div style="display:flex;justify-content:flex-end">
    <!--由于element目前还不支持展开设收缩节点的操作，所以暂时不能使用如下功能  -->
   <!-- <el-button type="info" v-cloak @click="expandAll">展开所有节点</el-button>
   <el-button type="info" v-cloak @click="collapseAll">收起所有节点</el-button>
    --> 
    
  <el-button type="danger" v-cloak @click="delChooseNode">删除所选角色</el-button>
</div>
    		
    	</div> 
         
  <ul id="icon-list"><li><span><i class="el-icon-arrow-down"></i>
      el-icon-arrow-down
    </span></li><li><span><i class="el-icon-arrow-left"></i>
      el-icon-arrow-left
    </span></li><li><span><i class="el-icon-arrow-right"></i>
      el-icon-arrow-right
    </span></li><li><span><i class="el-icon-arrow-up"></i>
      el-icon-arrow-up
    </span></li><li><span><i class="el-icon-caret-bottom"></i>
      el-icon-caret-bottom
    </span></li><li><span><i class="el-icon-caret-left"></i>
      el-icon-caret-left
    </span></li><li><span><i class="el-icon-caret-right"></i>
      el-icon-caret-right
    </span></li><li><span><i class="el-icon-caret-top"></i>
      el-icon-caret-top
    </span></li><li><span><i class="el-icon-check"></i>
      el-icon-check
    </span></li><li><span><i class="el-icon-circle-check"></i>
      el-icon-circle-check
    </span></li><li><span><i class="el-icon-circle-close"></i>
      el-icon-circle-close
    </span></li><li><span><i class="el-icon-circle-cross"></i>
      el-icon-circle-cross
    </span></li><li><span><i class="el-icon-close"></i>
      el-icon-close
    </span></li><li><span><i class="el-icon-upload"></i>
      el-icon-upload
    </span></li><li><span><i class="el-icon-d-arrow-left"></i>
      el-icon-d-arrow-left
    </span></li><li><span><i class="el-icon-d-arrow-right"></i>
      el-icon-d-arrow-right
    </span></li><li><span><i class="el-icon-d-caret"></i>
      el-icon-d-caret
    </span></li><li><span><i class="el-icon-date"></i>
      el-icon-date
    </span></li><li><span><i class="el-icon-delete"></i>
      el-icon-delete
    </span></li><li><span><i class="el-icon-document"></i>
      el-icon-document
    </span></li><li><span><i class="el-icon-edit"></i>
      el-icon-edit
    </span></li><li><span><i class="el-icon-information"></i>
      el-icon-information
    </span></li><li><span><i class="el-icon-loading"></i>
      el-icon-loading
    </span></li><li><span><i class="el-icon-role"></i>
      el-icon-menu
    </span></li><li><span><i class="el-icon-message"></i>
      el-icon-message
    </span></li><li><span><i class="el-icon-minus"></i>
      el-icon-minus
    </span></li><li><span><i class="el-icon-more"></i>
      el-icon-more
    </span></li><li><span><i class="el-icon-picture"></i>
      el-icon-picture
    </span></li><li><span><i class="el-icon-plus"></i>
      el-icon-plus
    </span></li><li><span><i class="el-icon-search"></i>
      el-icon-search
    </span></li><li><span><i class="el-icon-setting"></i>
      el-icon-setting
    </span></li><li><span><i class="el-icon-share"></i>
      el-icon-share
    </span></li><li><span><i class="el-icon-star-off"></i>
      el-icon-star-off
    </span></li><li><span><i class="el-icon-star-on"></i>
      el-icon-star-on
    </span></li><li><span><i class="el-icon-time"></i>
      el-icon-time
    </span></li><li><span><i class="el-icon-warning"></i>
      el-icon-warning
    </span></li><li><span><i class="el-icon-delete2"></i>
      el-icon-delete2
    </span></li><li><span><i class="el-icon-upload2"></i>
      el-icon-upload2
    </span></li><li><span><i class="el-icon-view"></i>
      el-icon-view
    </span></li></ul>
     
   <script src="../../static/js/lib/require.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../static/js/require-config.js" type="text/javascript" charset="utf-8"></script>
  <script src="../../static/js/role/roleList.js" type="text/javascript"></script>
  </body>
   </html>
